<template>
  <div>
    <!-- 添加用工人员 -->
    <el-dialog
      v-model="addEmployeesVisible"
      title="新增"
      width="70%"
    >
      <el-form
        ref="addEmployeesFormRef"
        :model="addEmployeesForm"
        label-width="auto"
        :rules="addEmployeesFormRules"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item
              label="企业名称："
              prop="merId"
              required
            >
              <el-select
                v-model="addEmployeesForm.merId"
                placeholder="请选择选择企业"
                clearable
                filterable
                style="width: 100%;"
                @change="merChange"
              >
                <el-option
                  v-for="(item,i) in merList"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="服务商名称："
              prop="sydId"
              required
            >
              <el-select
                v-model="addEmployeesForm.sydId"
                placeholder="请选择服务商"
                clearable
                filterable
                style="width: 100%;"
                @change="sydChange"
              >
                <el-option
                  v-for="(item,i) in sydList"
                  :label="item.gsmc"
                  :value="item.id"
                  :key="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="姓名："
              prop="workName"
              required
            >
              <el-input
                v-model="addEmployeesForm.workName"
                placeholder="请输入姓名"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="身份证号："
              prop="idCard"
              required
            >
              <el-input
                v-model="addEmployeesForm.idCard"
                placeholder="请输入身份证号"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="业务类型："
              prop="busType"
              required
            >
              <el-select
                v-model="addEmployeesForm.busType"
                placeholder="请选择业务类型"
                clearable
                filterable
                style="width: 100%;"
              >
                <el-option
                  v-for="(item,i) in wxfe_bus_type"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开户行："
              prop="khh"
              required
            >
              <el-select
                v-model="addEmployeesForm.khh"
                placeholder="请选择开户行"
                clearable
                filterable
                style="width: 100%;"
              >
                <el-option
                  v-for="(item,i) in bank_list"
                  :label="item.label"
                  :value="item.label"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开户行账号："
              prop="backCard"
              required
            >
              <el-input
                v-model="addEmployeesForm.backCard"
                placeholder="请输入开户行账号"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="手机号："
              prop="phone"
              required
            >
              <el-input
                v-model="addEmployeesForm.phone"
                placeholder="请输入手机号"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="身份证正面："
              prop="cardPositive"
            >
              <imageUpload
                v-model="addEmployeesForm.cardPositive"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="银行卡照片："
              prop="bankPic"
            >
              <imageUpload
                v-model="addEmployeesForm.bankPic"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="身份证反面："
              prop="cardBack"
            >
              <imageUpload
                v-model="addEmployeesForm.cardBack"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="人脸照片："
              prop="facePic"
            >
              <imageUpload
                v-model="addEmployeesForm.facePic"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addEmployeesVisible = false">关 闭</el-button>
          <el-button
            type="primary"
            :loading="submitLoading"
            @click="addUwbFun"
          >
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="addEmployees" lang="ts">
import api from '@/api/workMag/contractInquiry';
import { MerVo, SydVo, AddEmployeesForm } from '@/api/workMag/contractInquiry/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['getList'])
const { wxfe_bus_type, bank_list } = toRefs<any>(proxy?.useDict('wxfe_bus_type', 'bank_list'));
const submitLoading = ref(false);
const addEmployeesVisibleFun = async () => {
  addEmployeesVisible.value = true;
  const res = await api.listMer();
  merList.value = res.data;
};

const merList = ref<MerVo[]>([]);
const sydList = ref<SydVo[]>([]);

const merChange = async (e: any) => {
  sydList.value = [];
  addEmployeesForm.value.sydId = '';
  addEmployeesForm.value.sydNo = '';
  if (addEmployeesForm.value.merId) {
    let obj: any = merList.value.find((item) => item.id == addEmployeesForm.value.merId);
    addEmployeesForm.value.merNo = obj.no;
  } else {
    addEmployeesForm.value.merNo = '';
  }
  if (!addEmployeesForm.value.merId) return;
  const res = await api.listServ(e);
  console.log(res);
  sydList.value = res.data;
};
const sydChange = async (e: any) => {
  if (addEmployeesForm.value.sydId) {
    let obj: any = sydList.value.find((item) => item.id == addEmployeesForm.value.sydId);
    addEmployeesForm.value.sydNo = obj.no;
  } else {
    addEmployeesForm.value.sydNo = '';
  }
};

// 添加用工人员
const addEmployeesVisible = ref(false);
const addEmployeesFormRef = ref<ElFormInstance>();
const addEmployeesForm = ref<AddEmployeesForm>({
  backCard: '',
  bankPic: '',
  busType: '',
  cardBack: '',
  cardPositive: '',
  code: window.location.origin,
  facePic: '',
  idCard: '',
  khh: '',
  merId: '',
  merNo: '',
  phone: '',
  sydId: '',
  sydNo: '',
  workName: ''
});
const addEmployeesFormRules = ref({
  merId: [{ required: true, message: '请选择企业名称', trigger: 'change' }],
  sydId: [{ required: true, message: '请选择服务商', trigger: 'change' }],
  workName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  idCard: [{ required: true, pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }],
  busType: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
  khh: [{ required: true, message: '请选择开户行', trigger: 'change' }],
  backCard: [{ required: true, message: '请输入开户行账号', trigger: 'blur' }],
  phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }]
});

const addUwbFun = async () => {
  addEmployeesFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      submitLoading.value = true;
      const res = await api.addUwb(addEmployeesForm.value);
      addEmployeesVisible.value = false;
      emit('getList',{});
       submitLoading.value =  false;
      ElMessage.success('添加成功！');
    }
  });
};

defineExpose({
  addEmployeesVisibleFun
});
</script>

<style lang="scss" scoped>
</style>
